<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>登陆</title>
	<style type="text/css">
		body{
			padding: 0;
			margin: 0;
		}
		.backContainer{
			height: 756px;
			width: 100%;
			background-image: url('banner.jpg');
		}
		.container{
			margin: auto;
			position: absolute;
			top: 30%;
			left: 35%;
			height: 300px;
			width: 500px;
			background: #fff;
			box-shadow: 0px 0px 10px #304050;
			border-radius:10px;
		}
		.username{
			margin: 40px 50px;
		}
		.username input{
			border-radius:25px;
			border: 1px solid;	
			height: 30px;
			width: 312px;
			font-size: 18px;
			padding-left: 12px;
		}
		.username input:focus{	
			outline:none;
		}
		.username label{
			font-family: "微软雅黑";
		}
		.password{
			margin: 20px 50px;
		}
		.password input{
			border-radius:25px;
			border: 1px solid;	
			height: 30px;
			width: 312px;
			font-size: 18px;
			padding-left: 12px;
		}
		.password input:focus{	
			outline:none;
		}
		.password label{
			font-family: "微软雅黑";
		}
		.loginbutton button{
			background-color: #79b1d5;
			height: 40px;
			width: 380px;
			border-radius:25px;
			border: none;
			font-family: "微软雅黑";
			font-size: 20px;	
			color: #ffffff;
			margin: 20px 60px;
		}
		.signLink{
			width: 100%;
		}
		.signLink a{
			font-family: "微软雅黑";
			color: #304050;
			text-decoration: none;
			font-size: 14px;
			text-align: center;
			position:relative;
			margin:auto;
			top:50%;
			left:35%;
		}
		.wrong{
			border: 1px white solid;
			float: left;
			text-align: center;
			height: 15px;
			width: 99%;
			color: red;
			font-size: 12px;
		}
	</style>
</head>
<body>
<div class="backContainer">
	<div class="container">
			<div class="username"><label>用户名:&nbsp;&nbsp;&nbsp;</label><input type="text" name="username"></div>
			<div class="password"><label>密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;</label><input type="password" name="password"></div>
			<div class="wrong"></div>
			<div class="loginbutton"><button type="submit" class="loginButton">登陆</button></div>
			<div class="signLink"><a href="signIn.html">没有账号？立即注册一个</a></div>
	</div>
</div>

<script type="text/javascript" src="static/js/jquery-3.1.0.js"></script>
<script type="text/javascript">

	$(function(){
		$('.loginbutton button').click(function(){
			$.post("/login",{username:$(.username input).val(),password:$(.password input).val()},function(data){
				alert(data);
			})
		})
	})
</script>
</body>
</html>